<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>视频合成</title>
    <style>
        /* 遮罩层 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            box-shadow:
                0px 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 2;
            width: 300px;
            text-align: center;
        }

        /* 关闭按钮 */
        .close-btn {
            background-color: #f44336;
            color: white;
            border:
                none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .close-btn:hover {
            background-color: #d32f2f;
        }

        table {
            border-collapse: collapse;
            /* 合并边框 */
            border: none;
            /* 隐藏表格边框 */
        }

        th,
        td {
            border: none;
            /* 隐藏单元格边框 */
            padding: 10px;
            /* 添加一些内边距 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            padding:
                20px;
        }

        /* 顶部标签样式 */
        .tab-nav {
            display: flex;
            border-bottom: 2px solid #e6e6e6;
            margin-bottom: 20px;
        }

        .tab-item {
            padding: 12px 24px;
            cursor:
                pointer;
            font-size: 20px;
            color: #666;
            position: relative;
        }

        .tab-item.active {
            color: #1890ff;
        }

        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #1890ff;
        }

        /* 二级导航样式 */
        .sub-nav {
            display: flex;
            margin-bottom: 20px;
        }

        .sub-nav-item {
            padding: 8px 16px;
            cursor: pointer;
            font-size: 20px;
            color: #666;
        }

        .sub-nav-item.active {
            color: #1890ff;
        }

        .search-box input {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            width: 300px;
        }

        .btn-primary {
            padding:
                8px 16px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius:
                4px;
            cursor: pointer;
        }

        .folder-path {
            padding: 8px 16px;
            background-color:
                #f5f5f5;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .video-thumbnail {
            position: relative;
            aspect-ratio: 16/9;
            background-color: #f5f5f5;
            overflow: hidden;
        }

        .video-thumbnail img {
            width:
                100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .video-thumbnail:hover img {
            transform: scale(1.05);
        }

        .download-btn {
            position: absolute;
            right:
                10px;
            bottom: 10px;
            padding: 6px 12px;
            background-color: #1890ff;
            color:
                white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            opacity: 0;
            transition:
                opacity 0.3s;
        }

        .video-thumbnail:hover .download-btn {
            opacity: 1;
        }

        .video-title {
            padding: 8px;
            font-size: 20px;
            color: #333;
            text-align: center;
            white-space:
                nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-tree ul {
            list-style:
                none;
            padding-left: 20px;
        }

        .file-tree li {
            padding: 4px 0;
            font-size:
                20px;
            color: #666;
            cursor: pointer;
        }

        /* 标签内容区域 */
        .tab-content {
            display:
                none;
            /* padding: 20px; */
        }

        .tab-content.active {
            display: block;
        }

        /*
	视频合成样式 */
        .synthesis-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
            position: relative;
            padding-bottom: 200px;
            /*
	为底部设置留出空间 */
            font-size: 20px;
        }

        /* 字幕生成样式 */
        .subtitle-container {
            padding:
                20px;
        }

        /* 任务时长提示样式 */
        .task-duration {
            color: #666;
            font-size: 20px;
            margin-bottom:
                20px;
        }

        .subtitle-header {
            margin-bottom: 20px;
        }

        .subtitle-input {
            display:
                flex;
            align-items: center;
            gap: 12px;
        }

        .subtitle-title {
            font-size: 20px;
            color: #666;
            margin-bottom: 15px;
        }

        .subtitle-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .subtitle-table th,
        .subtitle-table td {
            padding:
                12px;
            text-align: left;
            border-bottom: 1px solid #e6e6e6;
        }

        .subtitle-footer {
            margin-top: 20px;
            text-align: right;
        }

        /* 配音生成样式 */
        .voice-container {
            padding: 20px;
        }

        .voice-content {
            background: #fff;
            border-radius: 8px;
            /* padding: 20px; */
        }

        .voice-header {
            margin-bottom: 20px;
        }

        .voice-input {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .voice-input label {
            font-size: 20px;
            color: #666;
        }

        .voice-textarea {
            width: 100%;
            height:
                120px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize:
                vertical;
            font-size: 20px;
        }

        .word-count {
            text-align: right;
            color: #999;
            font-size: 20px;
        }

        .voice-options {
            margin-top: 20px;
        }

        .option-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .option-group label {
            font-size: 20px;
            color: #666;
            white-space: nowrap;
        }

        .language-buttons {
            display: flex;
            flex-direction: row;
            gap: 15px;
        }

        .btn-option {
            padding:
                8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            font-size: 20px;
            white-space: nowrap;
            text-align: center;
        }

        .btn-option.active {
            background: #1890ff;
            color: white;
            border-color:
                #1890ff;
        }

        .voice-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill,
                    minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .voice-card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .voice-card.selected {
            border-color: blue;
        }

        .voice-avatar {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #f0f0f0;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
        }

        .voice-name {
            display: inline-block;
            margin-left: 10px;
        }

        .voice-badge {
            margin-top: 10px;
        }

        /* 文案提取样式 */
        .content-container {
            padding: 20px;
            background: #fff;
        }

        .content-header {
            margin-bottom: 20px;
        }

        .content-input {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input-group {
            display: flex;
            align-items:
                center;
            gap: 12px;
        }

        .input-group label {
            font-size: 20px;
            color: #666;
            white-space: nowrap;
        }

        .input-group .long-input {
            flex: 1;
            height: 40px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size:
                20px;
        }

        .content-main {
            margin-bottom: 20px;
        }

        .content-title {
            font-size:
                20px;
            color: #666;
            margin-bottom: 10px;
        }

        .content-textarea {
            width: 100%;
            height: 200px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            font-size: 20px;
        }

        .word-count {
            text-align: right;
            color:
                #999;
            font-size: 20px;
            margin-top: 5px;
        }

        .content-footer {
            margin-top:
                20px;
        }

        .button-group {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }

        .btn-option {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            font-size: 20px;
            min-width: 100px;
            text-align: center;
        }

        .btn-option:hover {
            border-color: #1890ff;
            color: #1890ff;
        }

        /* 素材库布局 */
        .material-container {
            display: flex;
            gap: 20px;
            height: calc(100vh - 150px);
            margin-left: -20px;
            /* 抵消container的padding */
        }

        /* 左侧素材边栏样式 */
        .material-sidebar {
            width: 260px;
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin: 0 20px;
            font-size: 20px;
        }

        .material-sidebar .sidebar-header {
            padding: 10px;
            border-bottom:
                1px solid #e0e0e0;
            margin-bottom: 15px;
            color: #666;
            font-size: 20px;
        }

        .open-file-btn {
            display: inline-block;
            background: #1890ff;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
            margin: 10px;
        }

        /* 文件树样式 */
        .folder-tree {
            list-style: none;
        }

        .folder-item {
            cursor:
                pointer;
            color: #333;
        }

        .folder-header {
            padding: 8px 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .folder-header:hover {
            background: #e8e8e8;
            border-radius: 4px;
        }

        .folder-item.active>.folder-header {
            background:
                #1890ff;
            color: white;
            border-radius: 4px;
        }

        .folder-content {
            margin-left:
                20px;
            display: none;
        }

        .folder-content.expanded {
            display: block;
        }

        .file-item {
            padding: 8px 10px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor:
                pointer;
            border-radius: 4px;
        }

        .file-item:hover {
            background: #e8e8e8;
            border-radius: 4px;
        }

        /* 文件选中状态 */
        .file-item.active {
            background: #1890ff;
            color: white;
        }

        .folder-icon {
            display: inline-block;
            width: 20px;
            text-align:
                center;
        }

        /* 右侧内容区域 */
        .main-content {
            flex: 1;
            overflow-y: auto;
            padding-right:
                20px;
        }

        /* 视频网格样式 */
        .video-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .video-card {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            background:
                #000;
            aspect-ratio: 16/9;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-title {
            position: absolute;
            bottom: 0;
            left:
                0;
            right: 0;
            padding: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 20px;
        }

        /* 文件夹箭头样式 */
        .folder-header {
            display: flex;
            align-items:
                center;
            gap: 5px;
            padding: 8px 10px;
            cursor: pointer;
        }

        .folder-icon {
            display: inline-block;
            width: 16px;
            text-align: center;
            font-size: 10px;
            line-height: 1;
        }

        /* 内容区域切换 */
        .content-section {
            display: none;
            width:
                100%;
        }

        .content-section.active {
            display: block;
        }

        .content-section.active2 {
            display: flex;
        }

        /* 智能分镜样式 */
        .smart-shot {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0,
                    0.1);
            margin: 0 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 10px;
        }

        .input-group label {
            min-width: 80px;
            color: #666;
        }

        .input-group input[type="text"] {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .button-group {
            display:
                flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .btn {
            padding: 8px 16px;
            border:
                none;
            border-radius: 4px;
            cursor: pointer;
        }

        .file-list {
            margin: 20px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .file-list table {
            width:
                100%;
            border-collapse: collapse;
        }

        .file-list th,
        .file-list td {
            padding:
                12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .file-list th {
            background-color: #f8f9fa;
            font-weight: normal;
            color: #666;
        }

        .options-group {
            margin: 20px 0;
        }

        .checkbox-group {
            display: flex;
            gap: 15px;
            margin-top:
                8px;
        }

        .slider-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .slider {
            flex: 1;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
        }

        .progress-section {
            margin-top: 20px;
        }

        /* 任务进度条样式 */
        .task-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 10px;
        }

        .progress-text {
            color: #666;
            white-space: nowrap;
        }

        .progress-bar {
            flex: 1;
            height:
                8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #1890ff;
            transition: width 0.3s ease;
        }

        .progress-percentage {
            color: #666;
            min-width: 50px;
            text-align: right;
            margin-left: auto;
            /*
	将百分比推到最右边 */
            padding-right: 10px;
        }

        .log-output {
            margin-top: 8px;
            padding:
                10px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius:
                4px;
            min-height: 100px;
        }

        /* 分镜列表样式 */
        .shot-list {
            flex: 1;
            overflow-x:
                auto;
        }

        .shot-list table {
            width: 100%;
            border-collapse: collapse;
            background:
                white;
        }

        .shot-list th,
        .shot-list td {
            padding: 12px;
            text-align: left;
            border: 1px solid #e6e6e6;
        }

        .shot-list th {
            background: #f5f5f5;
            font-weight:
                normal;
            color: #666;
        }

        .shot-list select {
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100px;
        }

        .delete-btn {
            color: #ff4d4f;
            text-decoration: none;
        }

        .delete-btn:hover {
            color: #ff7875;
        }

        .control-panel {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
        }

        /* 分镜列表样式 */
        .synthesis-layout {
            display: flex;
            gap: 20px;
            align-items:
                flex-start;
        }

        /* 操作按钮样式 */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .action-buttons .btn {
            width: 120px;
            text-align: center;
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 10px 0;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .action-buttons .btn:hover {
            background-color: #40a9ff;
        }

        /* 垂直按钮组样式
	*/
        .action-buttons.vertical {
            flex-direction: column;
            gap: 15px;
            margin-top:
                0;
            padding: 20px;
        }

        .action-buttons.vertical .btn {
            width: 120px;
            text-align:
                center;
        }

        /* 分镜列表样式 */
        .shot-name {
            width: 100%;
            padding: 4px 8px;
            border:
                1px solid transparent;
            border-radius: 4px;
            background: transparent;
        }

        .shot-name:hover {
            border-color: #d9d9d9;
        }

        .shot-name:focus {
            border-color: #1890ff;
            outline:
                none;
            background: white;
        }

        .folder-path {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            background: #f5f5f5;
            cursor:
                pointer;
        }

        .folder-path:hover {
            border-color: #1890ff;
        }

        /* 视频生成和输出设置样式
	*/
        .synthesis-settings {
            margin-top: 20px;
            border-top: 1px solid #e6e6e6;
            padding-top: 20px;
        }

        .settings-group {
            flex: 1;
            background: #f5f5f5;
            border-radius:
                4px;
            padding: 20px;
        }

        .settings-group h3 {
            font-size: 22px;
            color: #666;
            margin-bottom: 20px;
            font-weight: normal;
        }

        .setting-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }

        .setting-item label,
        .shot-settings label,
        .import-group label,
        .effect-item label,
        .file-selector label,
        .checkbox-label {
            font-size: 20px;
            color: #666;
            white-space: nowrap;
        }

        .setting-item input[type="text"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .setting-item .long-input {
            flex: 1;
        }

        .setting-item .short-input {
            width: 60px;
        }

        .setting-item select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 150px;
        }

        .setting-item .btn-primary {
            padding: 4px 12px;
            background: #1890ff;
            color: white;
            border:
                none;
            border-radius: 4px;
            cursor: pointer;
        }

        .setting-item .medium-input {
            width: 200px;
        }

        .setting-item .short-select {
            width: 80px;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .setting-item input[type="checkbox"] {
            margin: 0 5px 0 10px;
        }

        /* 底部固定设置区域 */
        .bottom-settings {
            position: fixed;
            bottom: 0;
            left: 0px;
            right: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 25px;
            background: white;
            border-top: 1px solid #e6e6e6;
            z-index: 100;
        }

        /* 设置组容器样式 */
        .settings-groups-container {
            display: flex;
            gap: 20px;
        }

        .settings-group {
            flex: 1;
            background: #f5f5f5;
            border-radius:
                4px;
            padding: 20px;
        }

        /* 任务日志样式 */
        .task-log {
            display: flex;
            align-items:
                center;
            gap: 10px;
            padding: 0 10px;
        }

        .log-text {
            color: #666;
            white-space:
                nowrap;
        }

        .log-link {
            margin-left: 5px;
        }

        .blue-link {
            color: #1890ff;
            text-decoration: none;
        }

        .blue-link:hover {
            text-decoration: underline;
        }

        /* 文本按钮样式 */
        .btn-text {
            background: none;
            border: none;
            color: #1890ff;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
        }

        .btn-text:hover {
            text-decoration:
                underline;
        }

        /* 列表中的下拉框样式 */
        .shot-list .short-select {
            width: 80px;
            padding:
                4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 导入控件组样式 */
        .import-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .import-controls .btn-text {
            white-space: nowrap;
        }

        .import-controls .short-select {
            min-width: 60px;
        }

        /* 小按钮样式 */
        .btn-small {
            padding: 4px 12px;
            font-size: 14px;
            height:
                40px;
            line-height: 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-small:hover {
            background: #40a9ff;
        }

        /* 分镜设置样式 */
        .shot-settings {
            display: flex;
            align-items: center;
            gap:
                12px;
        }

        .shot-settings .setting-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .shot-settings .short-input {
            width: 50px;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .shot-settings .medium-select {
            width: 100px;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius:
                4px;
        }

        .shot-settings .short-select {
            width: 60px;
            padding: 4px 8px;
            border:
                1px solid #ddd;
            border-radius: 4px;
        }

        .shot-settings .blue-link {
            color:
                #1890ff;
            text-decoration: none;
        }

        .shot-settings .blue-link:hover {
            text-decoration:
                underline;
        }

        /* 分镜名称输入框样式 */
        .shot-name-input {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid transparent;
            border-radius: 4px;
            background: transparent;
            font-size: 14px;
        }

        .shot-name-input:hover {
            border-color: #d9d9d9;
            background:
                white;
        }

        .shot-name-input:focus {
            border-color: #1890ff;
            outline: none;
            background: white;
        }

        /* 素材数量组样式 */
        .count-group {
            display: flex;
            flex-direction:
                column;
            gap: 5px;
            color: #666;
            font-size: 14px;
        }

        /* 专业合成导入控件组样式 */
        .synthesis-pro .import-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .synthesis-pro .import-group {
            display: flex;
            align-items: center;
            gap:
                8px;
        }

        .synthesis-pro .import-group label {
            color: #666;
            white-space: nowrap;
            font-size: 14px;
            min-width: 70px;
        }

        .synthesis-pro .import-controls .btn-small {
            white-space: nowrap;
            min-width: 80px;
        }

        /* 复选框标签样式 */
        .checkbox-label {
            color: #666;
            font-size: 14px;
            cursor: pointer;
            user-select: none;
            margin-left:
                5px;
        }

        input[type="checkbox"] {
            cursor: pointer;
        }

        /* 自动混剪页面样式 */
        .auto-synthesis-header {
            margin-bottom: 20px;
        }

        .file-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .file-selector .required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 4px;
        }

        .auto-synthesis-info {
            background: #f5f5f5;
            border-radius:
                4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .info-group {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            color: #666;
            font-size: 16px;
        }

        .auto-synthesis-settings {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .radio-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom:
                10px;
        }

        .checkbox-group {
            margin-top: 10px;
        }

        .effect-settings {
            display:
                flex;
            gap: 20px;
        }

        .effect-item {
            display: flex;
            align-items: center;
            gap:
                8px;
        }

        .effect-item label {
            color: #666;
            font-size: 14px;
        }

        /* 分组列表区域样式
	*/
        .group-list-section {
            background: #fff;
            border-radius: 8px;
            margin-bottom:
                20px;
        }

        .group-header {
            padding: 20px;
            border-bottom: 1px solid #e6e6e6;
        }

        .material-input {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .material-input .required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 4px;
        }

        .group-content {
            padding: 20px;
        }

        .group-title {
            margin-bottom: 20px;
            color: #666;
            font-size:
                20px;
        }

        .group-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .group-table th,
        .group-table td {
            padding: 12px;
            text-align: left;
            border-bottom:
                1px solid #e6e6e6;
        }

        .empty-placeholder {
            display: flex;
            flex-direction:
                column;
            align-items: center;
            padding: 40px 0;
            color: #999;
        }

        .empty-placeholder img {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }

        /* 分组列表区域样式 */
        .group-layout {
            display: flex;
            gap: 20px;
        }

        .group-list {
            flex: 1;
            background:
                #fff;
            border-radius: 8px;
        }

        .group-settings {
            width: 400px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .settings-section {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
        }

        .settings-section h3 {
            color: #666;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .setting-group,
        .effect-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .radio-group {
            display:
                flex;
            align-items: center;
            gap: 10px;
        }

        .effect-item {
            display: flex;
            align-items:
                center;
            gap: 10px;
        }

        .effect-item label {
            color: #666;
            font-size: 20px;
            min-width: 120px;
        }

        .blue-link {
            color: #1890ff;
            text-decoration: none;
        }

        .blue-link:hover {
            text-decoration: underline;
        }

        /* 字幕提取输入区域样式 */
        .subtitle-input.full-width {
            width: 100%;
        }

        .subtitle-input.full-width .long-input {
            flex: 1;
            height:
                40px;
        }

        .subtitle-input.full-width .short-select {
            height: 40px;
            min-width:
                120px;
        }

        .subtitle-input.full-width .btn-primary {
            height: 40px;
            min-width:
                100px;
        }

        /* 调整标签样式 */
        .subtitle-input.full-width label {
            font-size: 20px;
            color: #666;
            white-space: nowrap;
        }

        /* 配音页面左右布局 */
        .voice-layout {
            display:
                flex;
            gap: 40px;
        }

        .voice-left {
            flex: 1;
        }

        .voice-right {
            width: 300px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 调整控制器样式 */
        .voice-controls {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 20px;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .control-group:last-child {
            margin-bottom: 0;
        }

        .voice-slider {
            flex: 1;
            height: 4px;
        }

        /* 生成按钮样式 */
        .btn-generate {
            width: 100%;
            height: 40px;
            font-size: 20px;
            margin: 0;
        }

        .param-row {
            display: flex;
            align-items:
                center;
            gap: 10px;
            margin-top: 8px;
        }

        .btn-link {
            color: #1890ff;
            background:
                none;
            border: none;
            cursor: pointer;
            font-size: 20px;
            padding: 0;
            text-decoration:
                underline;
        }

        .btn-link:hover {
            color: #40a9ff;
        }

        .input-group select.long-input {
            appearance: none;
            background: #fff url('data:image/svg+xml;charset=US-ASCII, <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L1 4h10z" fill="%23999" /></svg>') no-repeat right 12px center;
            padding-right: 30px;
        }

        .lang-select {
            height: 40px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius:
                4px;
            font-size: 20px;
            min-width: 120px;
            background: #fff;
            cursor: pointer;
        }

        .lang-select:hover {
            border-color: #1890ff;
        }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>

<body>
    <div class="container">

        <div id="overlay" class="overlay" onclick="closeModal()"></div>

        <div id="modal" class="modal">
            <p id="message">消息弹窗</p>
            <!-- TODO: 调整消息弹窗样式 -->
            <button class="close-btn" onclick="closeModal()">关闭</button>
        </div>


        <!-- 顶部标签导航 -->
        <div class="tab-nav">
            <div class="tab-item active" data-tab="material">素材库</div>
            <div class="tab-item" data-tab="synthesis">视频合成</div>
            <div class="tab-item" data-tab="subtitle">字幕生成</div>
            <div class="tab-item" data-tab="voice">配音生成</div>
            <div class="tab-item" data-tab="content">文案提取</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 素材库内容 -->
            <div class="tab-content active" id="material">
                <div class="sub-nav">
                    <div class="sub-nav-item active">在线素材</div>
                    <div class="sub-nav-item">智能分镜</div>
                </div>
                <!-- 在线素材内容 -->
                <div class="content-section online-material active">
                    <div class="material-container">
                        <!-- 左侧文件树 -->
                        <div class="material-sidebar">
                            <div class="sidebar-header">
                                <p>
                                    <label for="local-video-material"></label>
                                    <input type="text" id="local-video-material" placeholder="请选择视频文件/文件夹"
                                        onclick="chooseFolder('local-video-material')" value="">
                                </p>
                            </div>
                            <a href="#" class="btn btn-primary" onclick="openFile('local-video-material')">打开文件夹</a>
                            <ul class="folder-tree">
                                <li class="folder-item expanded">
                                    <div class="folder-header">
                                        <span class="folder-icon">⯆</span>
                                        <span>📁 aimix</span>
                                    </div>
                                    <ul class="folder-content expanded">
                                        <li class="folder-item expanded active">
                                            <div class="folder-header">
                                                <span class="folder-icon">⯆</span>
                                                <span>📁 effect-video</span>
                                            </div>
                                            <ul class="folder-content expanded">
                                                <li class="file-item">📄 烟火星河.mp4</li>
                                                <li class="file-item">📄 烟花光晕.mp4</li>
                                                <li class="file-item">📄 星星冲屏.mp4</li>
                                                <li class="file-item">📄 绚丽光斑.mp4</li>
                                                <li class="file-item">📄 新春烟路.mp4</li>
                                                <li class="file-item">📄 心花怒放.mp4</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <!-- 右侧视频网格 -->
                        <div class="main-content">
                            <div class="video-grid">
                                <div class="video-card">
                                    <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                                        alt="烟火星河" class="video-thumbnail">
                                    <div class="video-title">烟火星河.mp4</div>
                                    <button class="download-btn">下载</button>
                                </div>
                                <div class="video-card">
                                    <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                                        alt="烟火星河" class="video-thumbnail">
                                    <div class="video-title">烟火星河.mp4</div>
                                    <button class="download-btn">下载</button>
                                </div>
                                <div class="video-card">
                                    <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                                        alt="烟火星河" class="video-thumbnail">
                                    <div class="video-title">烟火星河.mp4</div>
                                    <button class="download-btn">下载</button>
                                </div>
                                <div class="video-card">
                                    <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                                        alt="烟火星河" class="video-thumbnail">
                                    <div class="video-title">烟火星河.mp4</div>
                                    <button class="download-btn">下载</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 智能分镜内容 -->
                <div class="content-section smart-shot">
                    <div class="input-group">
                        <label>素材目录:</label>
                        <label for="clipInput"></label><input type="text" id="clipInput" placeholder="请选择视频文件/文件夹"
                            onclick="clipInput('clipInput')" value="">
                        <span id="clipInputCount">视频数量: 0</span>
                    </div>
                    <div class="input-group">
                        <label>导出目录:</label>
                        <label for="clipOutput"></label><input type="text" onclick="chooseFolder('clipOutput')"
                            id="clipOutput" placeholder="请选择文件夹" value="">
                    </div>
                    <div class="button-group">
                        <button class="btn btn-primary" id="open-file-btn"
                            onclick="openFile('clipOutput')">打开文件夹</button>
                        <button class="btn btn-primary" onclick="start_clip_video()">开始分镜任务</button>
                        <button class="btn btn-primary" id="stop-split" onclick="stop_worker()">停止任务</button>
                    </div>

                    <div class="file-list">
                        <table>
                            <thead>
                                <tr>
                                    <td><label>
                                            <input type="checkbox" id="selectAll">全选
                                        </label></td>
                                    <th>序号</th>
                                    <th>文件名</th>
                                    <th>时长</th>
                                    <th>大小</th>
                                </tr>
                            </thead>
                            <tbody id="shotListBody">
                                <!-- 动态生成的行将被插入这里 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="options-group">
                        <label>分镜模式:</label>
                        <div class="radio-group" id="split-mode-group">
                            <label><input type="radio" name="split_mode" value="scene" checked> 按场景智能分镜</label>
                            <label><input type="radio" name="split_mode" value="duration"> 按固定分镜时长分镜</label>
                            <label><input type="radio" name="split_mode" value="count"> 按分镜数量分镜</label>
                            <label><input type="radio" name="split_mode" value="voice"> 按口播分镜</label>
                            <label><input type="radio" name="split_mode" value="emotion"> AI精准转场分镜</label>
                        </div>
                    </div>

                    <div class="options-group">
                        <label>参数设置:</label>
                        <div id="param-setting"></div>
                    </div>
                    <div class="options-group">
                        <label>文件输出:</label>
                        <div class="radio-group">
                            <label><input type="radio" name="split_save_mode" value=true checked> 分目录保存 </label>
                            <label><input type="radio" name="split_save_mode" value=false> 同目录保存 </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 视频合成内容 -->
            <div class="tab-content" id="synthesis">
                <!-- 二级导航 -->
                <div class="sub-nav">
                    <div class="sub-nav-item active">基础合成</div>
                    <div class="sub-nav-item">高级合成</div>
                    <div class="sub-nav-item">专业合成</div>
                    <div class="sub-nav-item">自动混剪</div>
                    <div class="sub-nav-item">分组合成</div>
                </div>

                <!-- 合成内容区域 -->
                <div class="synthesis-content">
                    <!-- 基础合成 -->
                    <div class="content-section synthesis-basic active">
                        <div class="synthesis-container">
                            <div class="synthesis-layout">
                                <div class="shot-list">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>分镜顺序</th>
                                                <th>分镜名称</th>
                                                <th>分镜目录</th>
                                                <th>素材数量</th>
                                                <th>选取规则</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="shotListBody-synthesis">
                                            <!-- 动态生成的行将被插入这里 -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="action-buttons vertical">
                                    <button class="btn btn-primary" onclick="AddShot('normal')">新增分镜</button>
                                    <button class="btn btn-primary" onclick="refresh_table('normal')">刷新素材</button>
                                    <button class="btn btn-primary" onclick="ClearShot('normal')">清空分镜</button>
                                    <button class="btn btn-primary" onclick="start_normal_synthesis()">开始合成</button>
                                    <button class="btn btn-primary" onclick="stop_worker()">停止合成</button>
                                </div>
                            </div>
                            <!-- 底部固定设置区域 -->
                            <div class="bottom-settings">
                                <!-- 设置组容器 -->
                                <div class="settings-groups-container">
                                    <!-- 视频生成设置 -->
                                    <div class="settings-group video-settings">
                                        <h3>视频生成设置</h3>
                                        <div class="setting-item">
                                            <label>生成数量(1-10):</label>
                                            <label>
                                                <input type="number" value="1" step="1" min="1" max="10"
                                                    class="short-input" id="normal-generate-count">
                                            </label>
                                            <label><input type="checkbox" id="normal-by-audio"> 配音:</label>
                                            <label>
                                                <input type="text" placeholder="请选择音频文件，模拟配音" class="long-input"
                                                    readonly id="normal-audio-input"
                                                    onclick="chooseFile('normal-audio-input', 'mp3')">
                                            </label>
                                            <label><input type="checkbox" id="normal-keep-audio">保留素材音频</label>
                                            <label><input type="checkbox" id="normal-auto-match-audio">自动匹配音频</label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="normal-by-subtitle"> 启用字幕:</label>
                                            <label>
                                                <input type="text" placeholder="请选择字幕文件*.srt" class="long-input"
                                                    readonly id="normal-subtitle-input"
                                                    onclick="chooseFile('normal-subtitle-input','srt')">
                                            </label>
                                            <label>分镜时长(s):</label>
                                            <label>
                                                <input type="number" value="0" class="short-input"
                                                    id="normal-duration-input">
                                            </label>
                                            <label>倍速:</label>
                                            <label>
                                                <input type="number" step="0.01" value="1.0" min="0.5"
                                                    class="short-input" id="normal-speed-input">
                                            </label>
                                            <button class="btn-primary">高级设置</button> <!-- TODO: 实现设置弹窗 -->
                                        </div>
                                    </div>
                                    <!-- 视频输出设置 -->
                                    <div class="settings-group output-settings">
                                        <h3>视频输出设置</h3>
                                        <div class="setting-item">
                                            <label>导出目录:</label>
                                            <label for="normal-output-dir"></label><input type="text"
                                                id="normal-output-dir" value=""
                                                onclick="chooseFolder('normal-output-dir')" class="long-input">
                                            <button class="btn-primary" onclick="">打开</button>
                                        </div>
                                        <div class="setting-item">
                                            <label>分辨率:</label>
                                            <label for="normal-resolution-select"></label>
                                            <select class="short-select" id="normal-resolution-select">
                                                <option value="[720, 1280]">720x1280</option>
                                                <option value="[1080, 1920]">1080x1920</option>
                                                <option value="[1280, 720]">1280x720</option>
                                                <option value="[1920, 1080]">1920x1080</option>
                                            </select>

                                            <label>
                                                <select>
                                                    <option>默认</option>
                                                    <option>拉伸</option>
                                                    <option>等比例缩放</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 高级合成 -->
                    <div class="content-section synthesis-advanced">
                        <div class="synthesis-container">
                            <div class="synthesis-layout">
                                <div class="shot-list">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>分镜名称</th>
                                                <th>素材数量</th>
                                                <th>导入分镜素材</th>
                                                <th>分镜设置</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="shotListBody-advanced">
                                            <!-- 动态生成的行将被插入这里 -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="action-buttons vertical">
                                    <button class="btn btn-primary" onclick="AddShot('advanced')">新增分镜</button>
                                    <button class="btn btn-primary" onclick="ClearShot('advanced')">清空分镜</button>
                                    <!--      TODO: 待实现保存脚本         <button class="btn btn-primary">保存脚本</button>-->
                                    <button class="btn btn-primary" onclick="start_advanced_synthesis()">开始合成</button>
                                    <button class="btn btn-primary" onclick="stop_worker()">停止合成</button>
                                </div>
                            </div>
                            <!-- 底部固定设置区域 -->
                            <div class="bottom-settings">
                                <!-- 设置组容器 -->
                                <div class="settings-groups-container">
                                    <!-- 视频生成设置 -->
                                    <div class="settings-group video-settings">
                                        <h3>视频生成设置</h3>
                                        <div class="setting-item">
                                            <label>生成数量(1-10):</label>
                                            <label>
                                                <input type="number" step="1" value="1" min="1" max="10"
                                                    class="short-input" id="advanced-generate-count">
                                            </label>
                                            <label><input type="checkbox" id="advanced-by-audio"> 配音:</label>
                                            <label>
                                                <input type="text" placeholder="请选择音频文件夹" class="long-input" readonly
                                                    id="advanced-audio-input"
                                                    onclick="chooseFolder('advanced-audio-input')">
                                            </label>
                                            <label>
                                                <select class="short-select" id="advanced-audio-input-rule">
                                                    <option value="随机">随机</option>
                                                    <option value="去重">去重</option>
                                                </select>
                                            </label>

                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="advanced-by-subtitle">启用字幕:</label>
                                            <label>
                                                <input type="text" placeholder="请选择字幕文件夹" class="long-input" readonly
                                                    id="advanced-subtitle-input"
                                                    onclick="chooseFolder('advanced-subtitle-input')">
                                            </label>
                                            <label>
                                                <select class="short-select" id="advanced-subtitle-input-rule">
                                                    <option value="随机">随机</option>
                                                    <option value="去重">去重</option>
                                                </select>
                                            </label>
                                            <label><input type="checkbox" id="advanced-keep-audio">保留素材音频</label>
                                            <label><input type="checkbox" id="advanced-auto-match-audio">自动匹配音频</label>
                                            <label><input type="checkbox" id="advanced-video-priority">视频循环</label>
                                        </div>
                                        <div class="setting-item">
                                            <label>分镜时长(s):</label>
                                            <label>
                                                <input type="number" step="1" value="0" class="short-input"
                                                    id="advanced-duration-input">
                                            </label>
                                            <label>倍速:</label>
                                            <label>
                                                <input type="number" step="0.01" value="1.0" min="0.5"
                                                    class="short-input" id="advanced-speed-input">
                                            </label>
                                            <button class="btn-primary btn-small"
                                                onclick="advanced_settings()">高级设置</button>
                                        </div>
                                    </div>
                                    <!-- 视频输出设置 -->
                                    <div class="settings-group output-settings">
                                        <h3>视频输出设置</h3>
                                        <div class="setting-item">
                                            <label>导出目录:</label>
                                            <label for="advanced-output-dir"></label><input type="text"
                                                id="advanced-output-dir" value=""
                                                onclick="chooseFolder('advanced-output-dir')" class="long-input">
                                            <button class="btn-primary" onclick="">打开</button>
                                        </div>
                                        <div class="setting-item">
                                            <label>分辨率:</label>
                                            <label for="advanced-resolution-select"></label>
                                            <select class="short-select" id="advanced-resolution-select">
                                                <option value="[720, 1280]">720x1280</option>
                                                <option value="[1080, 1920]">1080x1920</option>
                                                <option value="[1280, 720]">1280x720</option>
                                                <option value="[1920, 1080]">1920x1080</option>
                                            </select>

                                            <label>
                                                <select>
                                                    <option>默认</option>
                                                    <option>拉伸</option>
                                                    <option>等比例缩放</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 专业合成 -->
                    <div class="content-section synthesis-pro">
                        <div class="synthesis-container">
                            <div class="synthesis-layout">
                                <div class="shot-list">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>分镜名称</th>
                                                <th>素材数量</th>
                                                <th>导入分镜素材</th>
                                                <th>镜像</th>
                                                <th>滤镜</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="shotListBody-pro">

                                        </tbody>
                                    </table>
                                </div>
                                <div class="action-buttons vertical">
                                    <button class="btn btn-primary" onclick="AddShot('pro')">新增分镜</button>
                                    <!--     TODO                       <button class="btn btn-primary">创建素材目录</button>-->
                                    <!--     TODO                       <button class="btn btn-primary">保存脚本</button>-->
                                    <button class="btn btn-primary" onclick="ClearShot('pro')">清空分镜</button>
                                    <button class="btn btn-primary" onclick="start_pro_synthesis()">开始合成</button>
                                    <button class="btn btn-primary" onclick="stop_worker()">停止合成</button>
                                </div>
                            </div>
                            <!-- 底部固定设置区域 -->
                            <div class="bottom-settings">
                                <!-- 设置组容器 -->
                                <div class="settings-groups-container">
                                    <!-- 视频生成设置 -->
                                    <div class="settings-group video-settings">
                                        <h3>视频生成设置</h3>
                                        <div class="setting-item">
                                            <label>生成数量(1-10):</label>
                                            <label>
                                                <input type="number" step="1" value="1" min="1" max="10"
                                                    class="short-input" id="pro-generate-count">
                                            </label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="pro-by-subtitle">字幕目录:</label>
                                            <label>
                                                <input type="text" placeholder="支持多个字幕，请选择..." class="long-input"
                                                    id="pro-subtitle-input"
                                                    onclick="chooseFolder('pro-subtitle-input')">
                                            </label>
                                            <label>
                                                <select class="short-select">
                                                    <option>随机</option>
                                                    <option>去重</option>
                                                </select>
                                            </label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="pro-keep-audio">保留素材音频</label>
                                        </div>
                                        <div class="setting-item">
                                            <label>倍速:</label>
                                            <label>
                                                <input type="number" step="0.01" value="1.0" min="0.5"
                                                    class="short-input" id="pro-speed-input">
                                            </label>
                                            <button class="btn-primary btn-small"
                                                onclick="advanced_settings()">高级设置</button> <!-- TODO: 实现设置弹窗 -->
                                        </div>
                                    </div>
                                    <!-- 视频输出设置 -->
                                    <div class="settings-group output-settings">
                                        <h3>视频输出设置</h3>
                                        <div class="setting-item">
                                            <label>导出目录:</label>
                                            <label for="pro-output-dir"></label><input type="text" id="pro-output-dir"
                                                value="" onclick="chooseFolder('pro-output-dir')" class="long-input">
                                            <button class="btn-primary" onclick="">打开</button>
                                        </div>
                                        <div class="setting-item">
                                            <label>分辨率:</label>
                                            <label for="pro-resolution-select"></label>
                                            <select class="short-select" id="pro-resolution-select">
                                                <option value="[720, 1280]">720x1280</option>
                                                <option value="[1080, 1920]">1080x1920</option>
                                                <option value="[1280, 720]">1280x720</option>
                                                <option value="[1920, 1080]">1920x1080</option>
                                            </select>
                                            <label>
                                                <select>
                                                    <option>默认</option>
                                                    <option>拉伸</option>
                                                    <option>等比例缩放</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 自动混剪 -->
                    <div class="content-section synthesis-auto">
                        <div class="synthesis-container">
                            <div class="auto-synthesis-header">
                                <div class="file-selector">
                                    <label class="required">分镜文件夹:</label>
                                    <label>
                                        <input type="text" placeholder="请选择分镜文件夹" class="long-input"
                                            id="auto-mix-folder-input" value=""
                                            onclick="auto_mix_folder_input('auto-mix-folder-input')">
                                    </label>
                                    <label>
                                        <select class="short-select" id="auto-select-rule">
                                            <option value="random">随机</option>
                                            <option value="unique">去重</option>
                                        </select>
                                    </label>
                                    <button class="btn-primary" onclick="start_auto_synthesis()">开始混剪</button>
                                    <button class="btn-primary" onclick="stop_synthesis()">取消任务</button>
                                </div>
                            </div>
                            <div class="auto-synthesis-info">
                                <label>文件夹内容</label>
                                <div class="info-group">
                                    <div class="info-item">文件夹内容</div>
                                    <div class="info-item" id="auto-mix-video-count">视频数量: </div>
                                    <div class="info-item" id="auto-mix-video-max">最长视频: 0秒</div>
                                    <div class="info-item" id="auto-mix-video-min">最短视频: 0秒</div>
                                    <div class="info-item" id="auto-mix-video-total">素材总时长: 0秒</div>
                                </div>
                                <div class="auto-synthesis-settings">
                                    <label>自动混剪设置</label>
                                    <div class="setting-group">
                                        <div class="radio-group">
                                            <label>
                                                <input type="radio" name="autoSetting" checked>
                                            </label>
                                            <label for="autoShotCount">分镜数量:</label>
                                            <label>
                                                <input type="number" min="2" step="1" id="autoShotCount" value="2"
                                                    class="short-input">
                                            </label>
                                        </div>
                                        <div class="radio-group">
                                            <label>
                                                <input type="radio" name="autoSetting">
                                            </label>
                                            <label for="autoShotDuration">视频时长(秒):</label>
                                            <label>
                                                <input type="number" step="0.1" value="1" id="autoShotDuration"
                                                    class="short-input">
                                            </label>
                                        </div>
                                        <div class="radio-group">
                                            <input type="radio" name="autoSetting" id="matchAudioDuration">
                                            <label for="matchAudioDuration">匹配配音时长</label>
                                        </div>
                                    </div>
                                    <div class="effect-settings">
                                        <label>分镜效果设置</label>
                                        <div class="effect-item">
                                            <label>转场:</label>
                                            <a href="#" class="blue-link">无</a>
                                        </div>
                                        <div class="effect-item">
                                            <label>转场时长(秒):</label>
                                            <label>
                                                <input type="text" value="0.2" id="translateDuration"
                                                    class="short-input">
                                            </label>
                                        </div>
                                        <div class="effect-item">
                                            <label>滤镜:</label>
                                            <a href="#" class="blue-link">无</a>
                                        </div>
                                        <div class="effect-item">
                                            <label>翻转:</label>
                                            <label>
                                                <select class="short-select">
                                                    <option>无</option>
                                                    <option>水平</option>
                                                    <option>垂直</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 底部固定设置区域 -->
                            <div class="bottom-settings">
                                <!-- 设置组容器 -->
                                <div class="settings-groups-container">
                                    <!-- 视频生成设置 -->
                                    <div class="settings-group video-settings">
                                        <h3>视频生成设置</h3>
                                        <div class="setting-item">
                                            <label>生成数量(1-10):</label>
                                            <label>
                                                <input type="number" value="1" step="1" min="1" max="10"
                                                    class="short-input" id="auto-generate-count">
                                            </label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="auto-by-audio"> 配音:</label>
                                            <label>
                                                <input type="text" placeholder="请选择音频文件，模拟配音" class="long-input"
                                                    readonly id="auto-audio-input"
                                                    onclick="chooseFolder('auto-audio-input')">
                                            </label>
                                            <label>
                                                <select class="short-select" id="auto-audio-input-rule">
                                                    <option value="随机">随机</option>
                                                    <option value="去重">去重</option>
                                                </select>
                                            </label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="auto-by-subtitle">启用字幕:</label>
                                            <label>
                                                <input type="text" placeholder="请选择字幕文件夹" class="long-input" readonly
                                                    id="auto-subtitle-input"
                                                    onclick="chooseFolder('auto-subtitle-input')">
                                            </label>
                                            <label>
                                                <select class="short-select" id="auto-subtitle-input-rule">
                                                    <option value="随机">随机</option>
                                                    <option value="去重">去重</option>
                                                </select>
                                            </label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="auto-keep-audio">保留素材音频</label>
                                        </div>
                                        <div class="setting-item">
                                            <label><input type="checkbox" id="auto-auto-match-audio">自动匹配音频</label>
                                        </div>
                                        <div class="setting-item">
                                            <label>倍速:</label>
                                            <label>
                                                <input type="number" step="0.01" value="1.0" min="0.5"
                                                    class="short-input" id="auto-speed-input">
                                            </label>
                                            <label>排除</label>
                                            <label>
                                                <input type="number" step="1" value="1" min="0" class="short-input"
                                                    id="auto-exclude-input">
                                            </label>
                                            <label>秒的分镜</label>
                                            <button class="btn-primary btn-small"
                                                onclick="advanced_settings()">高级设置</button> <!-- TODO: 实现设置弹窗 -->
                                        </div>
                                    </div>
                                    <!-- 视频输出设置 -->
                                    <div class="settings-group output-settings">
                                        <h3>视频输出设置</h3>
                                        <div class="setting-item">
                                            <label>导出目录:</label>
                                            <label for="auto-output-dir"></label><input type="text" id="auto-output-dir"
                                                value="" onclick="chooseFolder('auto-output-dir')" class="long-input">
                                            <button class="btn-primary" onclick="">打开</button>
                                        </div>
                                        <div class="setting-item">
                                            <label>分辨率:</label>
                                            <label for="auto-resolution-select"></label>
                                            <select class="short-select" id="auto-resolution-select">
                                                <option value="[720, 1280]">720x1280</option>
                                                <option value="[1080, 1920]">1080x1920</option>
                                                <option value="[1280, 720]">1280x720</option>
                                                <option value="[1920, 1080]">1920x1080</option>
                                            </select>
                                            <label>
                                                <select>
                                                    <option>默认</option>
                                                    <option>拉伸</option>
                                                    <option>等比例缩放</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TODO: 实现 分组合成 -->
                    <!--                    <div class="content-section synthesis-group">-->
                    <!--                        <div class="synthesis-container">-->
                    <!--                            &lt;!&ndash; 分组列表区域 &ndash;&gt;-->
                    <!--                            <div class="group-list-section">-->
                    <!--                                <div class="group-layout">-->
                    <!--                                    &lt;!&ndash; 左侧分组列表 &ndash;&gt;-->
                    <!--                                    <div class="group-list">-->
                    <!--                                        <div class="group-header">-->
                    <!--                                            <div class="material-input">-->
                    <!--                                                <label class="required">素材文件夹:</label>-->
                    <!--                                                <input type="text" placeholder="请选择场景文件夹" class="long-input">-->
                    <!--                                                <button class="btn-primary">导入素材</button>-->
                    <!--                                                <button class="btn-primary">开始混剪</button>-->
                    <!--                                                <button class="btn-primary">取消任务</button>-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="group-content">-->
                    <!--                                            <div class="group-title">-->
                    <!--                                                分组列表: (总导入分组数: 0, 已过滤空文件夹)-->
                    <!--                                            </div>-->
                    <!--                                            <div class="group-table">-->
                    <!--                                                <table>-->
                    <!--                                                    <thead>-->
                    <!--                                                    <tr>-->
                    <!--                                                        <th>分组名</th>-->
                    <!--                                                        <th>分镜(素材)数量</th>-->
                    <!--                                                    </tr>-->
                    <!--                                                    </thead>-->
                    <!--                                                    <tbody>-->
                    <!--                                                    <tr class="empty-data">-->
                    <!--                                                        <td colspan="2">-->
                    <!--                                                            <div class="empty-placeholder">-->
                    <!--                                                                <img src="../../assets/images/empty.png" alt="暂无数据">-->
                    <!--                                                                <span>暂无数据</span>-->
                    <!--                                                            </div>-->
                    <!--                                                        </td>-->
                    <!--                                                    </tr>-->
                    <!--                                                    </tbody>-->
                    <!--                                                </table>-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                    &lt;!&ndash; 右侧设置区域 &ndash;&gt;-->
                    <!--                                    <div class="group-settings">-->
                    <!--                                        <div class="settings-section">-->
                    <!--                                            <h3>自动混剪设置</h3>-->
                    <!--                                            <div class="setting-group">-->
                    <!--                                                <div class="radio-group">-->
                    <!--                                                    <input type="radio" id="groupShotDuration" name="groupSetting" checked>-->
                    <!--                                                    <label for="groupShotDuration">分镜时长(秒):</label>-->
                    <!--                                                    <input type="text" value="0" class="short-input">-->
                    <!--                                                </div>-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="settings-section">-->
                    <!--                                            <h3>场景效果设置</h3>-->
                    <!--                                            <div class="effect-group">-->
                    <!--                                                <div class="effect-item">-->
                    <!--                                                    <label>转场:</label>-->
                    <!--                                                    <a href="#" class="blue-link">无</a>-->
                    <!--                                                </div>-->
                    <!--                                                <div class="effect-item">-->
                    <!--                                                    <label>转场时长(秒):</label>-->
                    <!--                                                    <input type="text" value="0.2" class="short-input">-->
                    <!--                                                </div>-->
                    <!--                                                <div class="effect-item">-->
                    <!--                                                    <label>滤镜:</label>-->
                    <!--                                                    <a href="#" class="blue-link">无</a>-->
                    <!--                                                </div>-->
                    <!--                                                <div class="effect-item">-->
                    <!--                                                    <label>翻转:</label>-->
                    <!--                                                    <select class="short-select">-->
                    <!--                                                        <option>无</option>-->
                    <!--                                                    </select>-->
                    <!--                                                </div>-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            &lt;!&ndash; 底部固定设置区域 &ndash;&gt;-->
                    <!--                            <div class="bottom-settings">-->
                    <!--                                &lt;!&ndash; 设置组容器 &ndash;&gt;-->
                    <!--                                <div class="settings-groups-container">-->
                    <!--                                    &lt;!&ndash; 视频生成设置 &ndash;&gt;-->
                    <!--                                    <div class="settings-group video-settings">-->
                    <!--                                        <h3>视频生成设置</h3>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>生成数量(1-5):</label>-->
                    <!--                                            <input type="text" value="1" class="short-input">-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>配音目录(支持多个):</label>-->
                    <!--                                            <input type="text" placeholder="请选择配音目录，支持多个配音文件，提取配音"-->
                    <!--                                                   class="long-input">-->
                    <!--                                            <select class="short-select">-->
                    <!--                                                <option>随机</option>-->
                    <!--                                            </select>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>字幕目录:</label>-->
                    <!--                                            <input type="text" placeholder="支持多个字幕，请选择..." class="medium-input">-->
                    <!--                                            <select class="short-select">-->
                    <!--                                                <option>随机</option>-->
                    <!--                                            </select>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <input type="checkbox" id="keepAudioGroupCheck">-->
                    <!--                                            <label for="keepAudioGroupCheck" class="checkbox-label">保留素材音频</label>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <input type="checkbox" id="groupMatchAudioVideo">-->
                    <!--                                            <label for="groupMatchAudioVideo"-->
                    <!--                                                   class="checkbox-label">自动匹配音频/视频</label>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>倍速:</label>-->
                    <!--                                            <input type="text" value="1.0" class="short-input">-->
                    <!--                                            <label>排除<</label>-->
                    <!--                                            <input type="text" value="8" class="short-input">-->
                    <!--                                            <label>秒的分镜</label>-->
                    <!--                                            <button class="btn-primary btn-small">高级设置</button> &lt;!&ndash; TODO: 实现设置弹窗 &ndash;&gt;-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                    &lt;!&ndash; 视频输出设置 &ndash;&gt;-->
                    <!--                                    <div class="settings-group output-settings">-->
                    <!--                                        <h3>视频输出设置</h3>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>导出目录:</label>-->
                    <!--                                            <input type="text" value="C:\Users\Administrator\Downloads\aimix_save"-->
                    <!--                                                   class="long-input">-->
                    <!--                                            <button class="btn-primary">打开</button>-->
                    <!--                                        </div>-->
                    <!--                                        <div class="setting-item">-->
                    <!--                                            <label>分辨率:</label>-->
                    <!--                                            <select>-->
                    <!--                                                <option>变形 720x1280 合成块</option>-->
                    <!--                                            </select>-->
                    <!--                                            <select>-->
                    <!--                                                <option>请清全屏，默认</option>-->
                    <!--                                            </select>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </div>-->
                    <!--                                &lt;!&ndash; 任务进度条 &ndash;&gt;-->
                    <!--                                <div class="task-progress">-->
                    <!--                                    <div class="progress-text">任务进度:</div>-->
                    <!--                                    <div class="progress-bar">-->
                    <!--                                        <div class="progress-fill" style="width: 0%"></div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress-percentage">0%</div>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>

            <!-- 字幕生成内容 -->
            <div class="tab-content" id="subtitle">
                <div class="task-duration">
                    从音视频文件提取字幕信息
                </div>
                <div class="subtitle-container">
                    <div class="subtitle-header">
                        <div class="subtitle-input-file full-width">
                            <label>字幕提取(选择音视频文件):</label>
                            <label>
                                <input type="text" placeholder="请选择字幕文件" id="single-subtitle-input" readonly
                                    onclick="chooseSingleIdentAudioFile('single-subtitle-input')" class="long-input">
                            </label>
                            <label id="single-subtitle-input-duration">时长: 0分钟</label>
                            <button class="btn-primary" onclick="extract_subtitle()">提取字幕</button>
                        </div>
                    </div>
                    <div class="subtitle-table">
                        <div class="subtitle-title">编辑字幕</div>
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>内容</th>
                                </tr>
                            </thead>
                            <tbody class="subtitle-tbody" id="subtitle-tbody">

                            </tbody>
                        </table>
                    </div>
                    <div class="subtitle-footer">
                        <button class="btn-primary" onclick="save_subtitle()">保存字幕</button>
                    </div>
                </div>
            </div>

            <!-- 配音生成内容 -->
            <div class="tab-content" id="voice">
                <div class="voice-container">
                    <div class="voice-content">
                        <div class="voice-header">
                            <div class="voice-input">
                                <label>文案: (当前会员权益最多支持200字/次)</label>
                                <textarea placeholder="请输入需要配音的文案" class="voice-textarea"
                                    id="synthesis-voice-input"></textarea>
                                <div class="word-count">0 / 200</div> <!-- TODO: 限制字数/动态改变文字数 -->
                            </div>
                        </div>
                        <div class="voice-options">
                            <div class="voice-layout">
                                <!-- 左侧语言选择区域 -->
                                <div class="voice-left">
                                    <div class="option-group">
                                        <label>选择语言:</label>
                                        <label><input type="text" readonly id="synthesis-audio-save-path"
                                                placeholder="选择保存目录" value=""
                                                onclick="chooseFolder('synthesis-audio-save-path')"></label>
                                    </div>
                                    <div class="voice-grid">

                                    </div>
                                </div>
                                <!-- 右侧控制区域 -->
                                <div class="voice-right">
                                    <div class="voice-controls">
                                        <div class="control-group">
                                            <label>语速:</label>
                                            <input type="range" min="0.5" max="2.0" value="1.0" step="0.1"
                                                id="voice-speed-slider">
                                            <span id="voice-speed-slider-value">1.0</span>
                                        </div>
                                        <div class="control-group">
                                            <label>语调:</label>
                                            <input type="range" min="0.5" max="2.0" value="1.0" step="0.1"
                                                id="voice-pitch-slider">
                                            <span id="voice-pitch-slider-value">1.0</span>
                                        </div>
                                        <div class="control-group">
                                            <label>音量:</label>
                                            <input type="range" min="0" max="100" value="100" id="voice-volume-slider">
                                            <span id="voice-volume-slider-value">100</span>
                                        </div>
                                    </div>
                                    <button class="btn-primary btn-generate" onclick="generate_voice()">生成配音</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文案提取内容 -->
            <div class="tab-content" id="content">
                <div class="content-container">
                    <div class="content-header">
                        <div class="content-input full-width">
                            <div class="input-group">
                                <label for="contentExtractFile">文案提取(选择文件):</label>
                                <input type="text" placeholder="请选择字幕文件" id="contentExtractFile" value="" readonly
                                    onclick="chooseSingleIdentAudioFile('contentExtractFile')" class="long-input">
                                <label id="contentExtractFile-duration">时长: 0分钟</label>
                                <button class="btn-primary" onclick="extract_content()">提取文案</button>
                            </div>
                        </div>
                    </div>
                    <div class="content-main">
                        <div class="content-title">文案内容:</div>
                        <textarea class="content-textarea" placeholder="请输入需要修改的文案"
                            id="contentExtractTextarea"></textarea>
                        <div class="word-count">0 / 10000</div> <!-- TODO: 限制字数/动态改变文字数 -->
                    </div>
                    <div class="content-main">
                        <div class="button-group">
                            <button class="btn-option" onclick="rewrite_content()">文案重写</button>
                        </div>
                    </div>
                    <div class="content-main">
                        <div class="content-title">修改后的文案内容:</div>
                        <textarea class="content-textarea" placeholder="修改后的文案将显示在这里" id="rewrite-content"
                            readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        var shot_list_item = {
            normal: [], // 基础合成分镜列表
            advanced: [], // 高级合成分镜列表
            pro: [], // 专业合成分镜列表
            auto: {
                folder: "",
                priority: "分镜数量",  // 1: 分镜数量 2: 视频时长 3: 音频时长
                count: 2,  // 分镜数量
                duration: 1,  // 视频时长
                transition_duration: 0.2,  // 转场时长
                flip: "无",
                filter: null, // 滤镜
                mirror: null  // 转场特效
            } // 自动混剪分镜列表
        };
        var item = {
            paramRange: 0.5,
            durationInput: 5,
            countInput: 5,
            normal: {},
            advanced: {},
            pro: {},
            auto: {}
        };
        var subtitle_data = [];
        var audio_models = [];
        var voiceModel = "";
        var voiceVoice = "";

        // 标签切换功能初始化函数
        function init() {

            new QWebChannel(parent.qt.webChannelTransport, function (channel) {
                Bridge = channel.objects.Bridge;

                Bridge.started.connect(function (msg) {
                    showModal(msg)
                });
                Bridge.finished.connect(function (msg) {
                    showModal(msg)
                });
                Bridge.failed.connect(function (msg) {
                    showModal(msg)
                });


                /*  文件操作方法  */
                // 选择文件夹
                window.chooseFolder = function (eid) {
                    Bridge.choose_folder(eid);
                };
                // 选择文件
                window.chooseFile = function (eid, suffix) {
                    Bridge.choose_file(eid, suffix);
                };
                // 打开文件或者文件夹
                window.openFile = function (eid) {
                    let path = document.getElementById(eid).value;
                    if (path) {
                        Bridge.open_file(path);
                    }
                };
                window.shot_folder_input = function (channel, index, name, suffix) {
                    if (!suffix) {
                        suffix = "video"
                    }
                    Bridge.choose_folder_input(channel, index, name, suffix)
                };
                window.shot_file_input = function (channel, index, suffix) {
                    Bridge.choose_file_input(channel, index, suffix)
                };
                // 自动混剪选择文件夹
                window.auto_mix_folder_input = function (eid) {
                    Bridge.auto_mix_folder_input(eid)
                };
                Bridge.auto_mix_folder_result.connect(function (eid, path, count, min_duration, max_duration, sum_duration) {
                    shot_list_item.auto.folder = path;
                    document.getElementById(eid).value = path;
                    document.getElementById("auto-mix-video-count").innerText = "视频数量: " + count;
                    document.getElementById("auto-mix-video-max").innerText = "最长视频: " + max_duration + "秒";
                    document.getElementById("auto-mix-video-min").innerText = "最短视频: " + min_duration + "秒";
                    document.getElementById("auto-mix-video-total").innerText = "素材总时长: " + sum_duration + "秒";
                });

                // 选择的文件夹信号槽
                Bridge.select_folder_result.connect(function (eid, path) {
                    document.getElementById(eid).value = path;
                });
                // 返回智能分镜目录
                Bridge.select_files_result.connect(function (eid, files, count) {
                    // 渲染基础合成分镜列表
                    const tbody = document.getElementById('shotListBody');
                    if (!tbody) {
                        return;
                    }
                    tbody.innerHTML = files.map(file_item => `
                                        <tr data-id="">
                                            <td><label>
                                                <input type="checkbox" class="row-check" value="${file_item.file}">
                                            </label></td>
                                            <td>${file_item.id}</td>
                                            <td>${file_item.file}</td>
                                            <td>${file_item.duration}</td>
                                            <td>${file_item.size}</td>
                                        </tr>
                                    `).join('');

                    document.getElementById("clipInputCount").innerText = "视频数量: " + count;

                });
                // 基础合成选择文件
                Bridge.select_folder_normal_shot_path_input.connect(function (channel, index, path, name, count) {
                    shot_list_item[channel].forEach(shot => {
                        if (shot.id === index) {
                            shot.folder = path;
                            shot[name] = count;
                            refresh_table(channel);
                        }
                    })
                });

                window.clipInput = function () {
                    Bridge.choose_folder_and_read_video_files("clipInput")
                };


                /*  操作逻辑  */
                // 开始分镜
                window.start_clip_video = function () {

                    const table = document.getElementById("shotListBody");
                    const rows = table.querySelectorAll("tbody tr");
                    const selectedValues = [];

                    rows.forEach(row => {
                        const checkbox = row.querySelector("td:nth-child(1) input[type='checkbox']");
                        if (checkbox && checkbox.checked) {
                            selectedValues.push(checkbox.value);
                        }
                    });
                    if (selectedValues.length === 0) {
                        showModal("请选择分镜")
                        return;
                    }

                    let output_path = document.getElementById("clipOutput").value,
                        selected = document.querySelector('input[name="split_mode"]:checked').value;
                    if (!output_path) {
                        showModal("请选择输出目录")
                        return;
                    }
                    clip_path = JSON.stringify(selectedValues)
                    if (selected === "scene") {
                        Bridge.start_clip("scene", clip_path, output_path, item.paramRange)
                    } else if (selected === "duration") {
                        Bridge.start_clip("duration", clip_path, output_path, item.durationInput)
                    } else if (selected === "count") {
                        Bridge.start_clip("count", clip_path, output_path, item.countInput)
                    } else if (selected === "voice") {
                        Bridge.start_clip("voice", clip_path, output_path, "")
                    } else if (selected === "emotion") {
                        showModal("该功能正在开发中，敬请期待！")
                    }
                };
                // 基础合成
                window.start_normal_synthesis = function () {
                    // 参数获取
                    let video_groups = [];
                    shot_list_item.normal.forEach(shot => {
                        if (shot.folder) {
                            video_groups.push({
                                files: shot.folder,
                                rule: shot.rule === "随机" ? "random" : "unique",
                                duration: parseInt(document.getElementById("normal-duration-input").value)
                            });
                        }
                    });
                    if (video_groups.length === 0) {
                        showModal("请选择分镜")
                        return;
                    }
                    let channel = "normal",
                        num_outputs = parseInt(document.getElementById('normal-generate-count').value),
                        output_dir = document.getElementById('normal-output-dir').value,
                        import_subtitle = document.getElementById("normal-by-subtitle").checked,
                        subtitle_path = document.getElementById("normal-subtitle-input").value,
                        keep_original_audio = document.getElementById("normal-keep-audio").checked,
                        auto_match_audio = document.getElementById("normal-auto-match-audio").checked,
                        audio_path = document.getElementById("normal-audio-input").value,
                        audio_status = document.getElementById("normal-by-audio").checked,
                        total_duration = 0,
                        speed = parseFloat(document.getElementById("normal-speed-input").value),
                        video_priority = true,
                        resolution = document.getElementById("normal-resolution-select").value,
                        set_title = false,  // TODO: 实现高级设置
                        set_background_music = false,
                        set_overlay = false,
                        set_cover = false,
                        set_watermark = false,
                        set_filters = false,
                        kwargs = {};
                    if (!output_dir) {
                        showModal("请选择保存目录");
                        return;
                    }
                    const params = {
                        "channels": channel,
                        "video_groups": video_groups,
                        "num_outputs": num_outputs,
                        "output_dir": output_dir,
                        "import_subtitle": import_subtitle,
                        "subtitle_path": subtitle_path,
                        "keep_original_audio": keep_original_audio,
                        "auto_match_audio": auto_match_audio,
                        "audio_path": audio_path,
                        "audio_status": audio_status,
                        "total_duration": total_duration,
                        "speed": speed,
                        "video_priority": video_priority,
                        "resolution": resolution,
                        "set_title": set_title,
                        "set_background_music": set_background_music,
                        "set_overlay": set_overlay,
                        "set_cover": set_cover,
                        "set_watermark": set_watermark,
                        "set_filters": set_filters,
                        "kwargs": kwargs
                    }
                    Bridge.video_systhesis(JSON.stringify(params))
                };
                // 高级合成
                window.start_advanced_synthesis = function () {
                    // 参数获取
                    let video_groups = [];
                    shot_list_item.advanced.forEach(shot => {
                        if (shot.folder) {

                            let clip_status = null;
                            if (shot.mirror === "水平") {
                                clip_status = "v"
                            } else if (shot.mirror === "垂直") {
                                clip_status = "h"
                            } else if (shot.mirror === "随机") {
                                clip_status = "random"
                            }
                            video_groups.push({
                                files: shot.folder,
                                rule: shot.rule === "随机" ? "random" : "unique",
                                duration: parseInt(shot.duration),
                                start_time: parseInt(shot.startTime),
                                flip: clip_status
                            });
                        }
                    });
                    if (video_groups.length === 0) {
                        showModal("请选择分镜")
                        return;
                    }

                    let channel = "advanced",
                        num_outputs = parseInt(document.getElementById('advanced-generate-count').value),
                        output_dir = document.getElementById('advanced-output-dir').value,
                        import_subtitle = document.getElementById("advanced-by-subtitle").checked,
                        subtitle_path = document.getElementById("advanced-subtitle-input").value,
                        keep_original_audio = document.getElementById("advanced-keep-audio").checked,
                        auto_match_audio = document.getElementById("advanced-auto-match-audio").checked,
                        audio_path = document.getElementById("advanced-audio-input").value,
                        audio_status = document.getElementById("advanced-by-audio").checked,
                        total_duration = 0,
                        speed = parseFloat(document.getElementById("normal-speed-input").value),
                        video_priority = !document.getElementById("advanced-video-priority").checked,
                        resolution = document.getElementById("advanced-resolution-select").value,
                        set_title = false,  // TODO: 实现高级设置
                        set_background_music = false,
                        set_overlay = false,
                        set_cover = false,
                        set_watermark = false,
                        set_filters = false,
                        kwargs = {};
                    if (!output_dir) {
                        showModal("请选择保存目录");
                        return;
                    }
                    const params = {
                        "channels": channel,
                        "video_groups": video_groups,
                        "num_outputs": num_outputs,
                        "output_dir": output_dir,
                        "import_subtitle": import_subtitle,
                        "subtitle_path": subtitle_path,
                        "keep_original_audio": keep_original_audio,
                        "auto_match_audio": auto_match_audio,
                        "audio_path": audio_path,
                        "audio_status": audio_status,
                        "total_duration": total_duration,
                        "speed": speed,
                        "video_priority": video_priority,
                        "resolution": resolution,
                        "set_title": set_title,
                        "set_background_music": set_background_music,
                        "set_overlay": set_overlay,
                        "set_cover": set_cover,
                        "set_watermark": set_watermark,
                        "set_filters": set_filters,
                        "kwargs": kwargs
                    }
                    Bridge.video_systhesis(JSON.stringify(params))
                };
                // 专业合成
                window.start_pro_synthesis = function () {
                    // 参数获取
                    let video_groups = [];
                    shot_list_item.pro.forEach(shot => {
                        if (shot.folder) {

                            let clip_status = null;
                            if (shot.mirror === "水平") {
                                clip_status = "v"
                            } else if (shot.mirror === "垂直") {
                                clip_status = "h"
                            } else if (shot.mirror === "随机") {
                                clip_status = "random"
                            }
                            video_groups.push({
                                files: shot.folder,
                                rule: shot.rule === "随机" ? "random" : "unique",
                                audio: shot.audio,
                                audio_rule: shot.audio_rule,
                                flip: clip_status
                            });
                        }
                    });
                    if (video_groups.length === 0) {
                        showModal("请选择分镜")
                        return;
                    }

                    let channel = "pro",
                        num_outputs = parseInt(document.getElementById('pro-generate-count').value),
                        output_dir = document.getElementById('pro-output-dir').value,
                        import_subtitle = document.getElementById("pro-by-subtitle").checked,
                        subtitle_path = document.getElementById("pro-subtitle-input").value,
                        keep_original_audio = document.getElementById("pro-keep-audio").checked,
                        auto_match_audio = false,
                        audio_path = "",
                        audio_status = false,
                        total_duration = 0,
                        speed = parseFloat(document.getElementById("pro-speed-input").value),
                        video_priority = true,
                        resolution = document.getElementById("pro-resolution-select").value,
                        set_title = false,  // TODO: 实现高级设置
                        set_background_music = false,
                        set_overlay = false,
                        set_cover = false,
                        set_watermark = false,
                        set_filters = false,
                        kwargs = {};
                    if (!output_dir) {
                        showModal("请选择保存目录");
                        return;
                    }
                    const params = {
                        "channels": channel,
                        "video_groups": video_groups,
                        "num_outputs": num_outputs,
                        "output_dir": output_dir,
                        "import_subtitle": import_subtitle,
                        "subtitle_path": subtitle_path,
                        "keep_original_audio": keep_original_audio,
                        "auto_match_audio": auto_match_audio,
                        "audio_path": audio_path,
                        "audio_status": audio_status,
                        "total_duration": total_duration,
                        "speed": speed,
                        "video_priority": video_priority,
                        "resolution": resolution,
                        "set_title": set_title,
                        "set_background_music": set_background_music,
                        "set_overlay": set_overlay,
                        "set_cover": set_cover,
                        "set_watermark": set_watermark,
                        "set_filters": set_filters,
                        "kwargs": kwargs
                    }
                    Bridge.video_systhesis(JSON.stringify(params))
                };
                // 自动混剪
                window.start_auto_synthesis = function () {
                    // 参数获取
                    if (!shot_list_item.auto.folder) {
                        showModal("请选择分镜")
                        return;
                    }

                    let channel = "auto",
                        num = shot_list_item.auto.count,
                        rule = shot_list_item.auto.priority,
                        times = shot_list_item.auto.duration,
                        select_rule = document.getElementById("auto-select-rule").value,
                        num_outputs = parseInt(document.getElementById('auto-generate-count').value),
                        output_dir = document.getElementById('auto-output-dir').value,
                        import_subtitle = document.getElementById("auto-by-subtitle").checked,
                        subtitle_path = document.getElementById("auto-subtitle-input").value,
                        keep_original_audio = document.getElementById("auto-keep-audio").checked,
                        auto_match_audio = document.getElementById("auto-auto-match-audio").checked,
                        audio_path = document.getElementById("auto-audio-input").value,
                        audio_status = document.getElementById("auto-by-audio").checked,
                        total_duration = 0,
                        speed = parseFloat(document.getElementById("auto-speed-input").value),
                        video_priority = true,
                        resolution = document.getElementById("auto-resolution-select").value,
                        set_title = false,
                        set_background_music = false,
                        set_overlay = false,
                        set_cover = false,
                        set_watermark = false,
                        set_filters = false,
                        kwargs = {};
                    if (!output_dir) {
                        showModal("请选择保存目录");
                        return;
                    }
                    const params = {
                        "channels": channel,
                        "video_groups": shot_list_item.auto.folder,
                        "num": num,
                        "rule": rule,
                        "times": times,
                        "select_rule": select_rule,
                        "num_outputs": num_outputs,
                        "output_dir": output_dir,
                        "import_subtitle": import_subtitle,
                        "subtitle_path": subtitle_path,
                        "keep_original_audio": keep_original_audio,
                        "auto_match_audio": auto_match_audio,
                        "audio_path": audio_path,
                        "audio_status": audio_status,
                        "total_duration": total_duration,
                        "speed": speed,
                        "video_priority": video_priority,
                        "resolution": resolution,
                        "set_title": set_title,
                        "set_background_music": set_background_music,
                        "set_overlay": set_overlay,
                        "set_cover": set_cover,
                        "set_watermark": set_watermark,
                        "set_filters": set_filters,
                        "kwargs": kwargs
                    }
                    Bridge.video_systhesis(JSON.stringify(params))
                };

                // 字幕生成功能选择文件
                window.chooseSingleIdentAudioFile = function (eid) {
                    Bridge.choose_single_ident_audio_file(eid);
                };
                Bridge.choose_single_ident_audio_file_result.connect(function (eid, file_path, duration) {
                    document.getElementById(eid).value = file_path;
                    document.getElementById(eid + "-duration").innerText = "时长: " + duration / 60 + "分钟";
                })
                // 提取字幕
                window.extract_subtitle = function () {
                    const file_path = document.getElementById("single-subtitle-input").value;
                    if (!file_path) {
                        showModal("请选择音视频文件");
                        return;
                    }
                    Bridge.batch_ident_audio(JSON.stringify([file_path]));
                };
                // 字幕提取结果
                Bridge.ident_result.connect(function (content) {
                    let datas = JSON.parse(content);
                    let subtitle_tbody = document.getElementById("subtitle-tbody");
                    let context = [];
                    for (let i = 0; i < datas.length; i++) {
                        context.push(`
                                            <tr data-id="${i + 1}">
                                                <td>${i + 1}</td>
                                                <td>
                                                <label>
                                                <input class="subtitle-input" type="text" value="${datas[i].text}"></label>
                                                </td>
                                            </tr>
                                        `)
                        subtitle_data.push({
                            "id": i + 1,
                            "text": datas[i].text,
                            "start": datas[i].begin_time,
                            "end": datas[i].end_time
                        })
                    }
                    subtitle_tbody.innerHTML = context.join("");
                    refresh_subtitle_table();
                });
                // 字幕保存
                window.save_subtitle = function () {
                    Bridge.save_srt_file(JSON.stringify(subtitle_data))
                }

                // 文案提取
                window.extract_content = function () {
                    const file_path = document.getElementById("contentExtractFile").value;
                    if (!file_path) {
                        showModal("请选择音视频文件");
                        return;
                    }
                    Bridge.ident_audio_context(JSON.stringify([file_path]));
                };
                Bridge.ident_context_result.connect(function (content) {
                    document.getElementById("contentExtractTextarea").textContent = content;
                });

                // 重写
                window.rewrite_content = function () {
                    let content = document.getElementById("contentExtractTextarea").textContent;
                    Bridge.rewrite(content);
                };
                Bridge.rewrite_result.connect(function (content) {
                    document.getElementById("rewrite-content").textContent = content;
                });

                // 音频合成
                window.load_audio_metrail = function () {
                    Bridge.load_audio_model();
                };
                Bridge.load_audio_model_result.connect(function (content) {
                    audio_models = JSON.parse(content);
                    let audio_list_element = document.querySelector(".voice-grid");
                    if (!audio_list_element) {
                        return;
                    }
                    audio_list_element.innerHTML = audio_models.map(model => `
                                        <div class="voice-card" data-index="${model.tone_name}">
                                            <div class="voice-info">
                                                <div class="voice-avatar">
                                                    <span>S</span>
                                                    <span class="voice-model" style="display:none;">${model.model}</span>
                                                    <span class="voice-voice" style="display:none;">${model.voice}</span>
                                                </div>
                                                <div class="voice-name">
                                                    <span>${model.tone_name}</span>
                                                    <br>
                                                    <span class="voice-lang">${model.use_case}</span>
                                                </div>
                                                <div class="voice-badge">
                                                    <audio class="audioPlayer" controls>
                                                        <source src="${model.object_name}" type="audio/mpeg">
                                                    </audio>
                                                    <button class="btn-try" onclick="togglePlayPause(this)">试听</button>
                                                </div>
                                            </div>
                                        </div>
                                    `).join('');
                    // 为每个音频卡片添加点击事件监听器
                    document.querySelectorAll(".voice-card").forEach(card => {
                        card.addEventListener("click", () => {
                            // 清除其他卡片的选中状态
                            document.querySelectorAll(".voice-card.selected").forEach(selectedCard => {
                                selectedCard.classList.remove("selected");
                            });
                            // 标记当前卡片为选中状态
                            card.classList.add("selected");
                            // 获取选中的卡片信息
                            voiceModel = card.querySelector(".voice-model").textContent;
                            voiceVoice = card.querySelector(".voice-voice").textContent;
                        });
                    });

                });

                // 生成配音
                window.generate_voice = function () {
                    let speed = document.getElementById('voice-speed-slider').value,
                        pitch = document.getElementById('voice-pitch-slider').value,
                        volume = document.getElementById('voice-volume-slider').value;
                    let output_dir = document.getElementById('synthesis-audio-save-path').value;
                    if (!output_dir) {
                        showModal("请选择保存目录");
                        return;
                    }
                    if (!voiceModel) {
                        showModal("音频模型未选择")
                        return;
                    }
                    let context = document.getElementById('synthesis-voice-input').value;
                    if (!context) {
                        showModal("请先输入文案");
                        return;
                    }
                    Bridge.synthesis_audio(JSON.stringify({
                        "text": context,
                        "model": voiceModel,
                        "voice": voiceVoice,
                        "speed": parseFloat(speed),
                        "pitch": parseFloat(pitch),
                        "volume": parseInt(volume),
                        
                    }));

                };

                // 停止
                window.stop_worker = function () {
                    Bridge.stop()
                };

            });

            window.togglePlayPause = function (button) {
                // 获取当前按钮对应的音频元素
                const audioPlayer = button.previousElementSibling; // 获取<button>之前的<audio>元素
                if (audioPlayer.paused) {
                    // 如果音频处于暂停状态，则播放
                    audioPlayer.play();
                    button.textContent = '暂停'; // 更新按钮文本
                } else {
                    // 如果音频正在播放，则暂停
                    audioPlayer.pause();
                    button.textContent = '试听'; // 更新按钮文本
                }
            };

            window.advanced_settings = function () {
                // TODO: 显示弹窗设置
            };

            window.renderParamSetting = function (mode) {
                const container = document.getElementById('param-setting');
                container.innerHTML = ''; // 清空之前的内容

                if (mode === 'scene') {
                    // 滑动条参数（0.2 ~ 0.9）
                    const sliderDiv = document.createElement('div');
                    sliderDiv.className = 'slider-group';
                    sliderDiv.innerHTML = `
                                <input type="range" id="paramRange" min="0.2" max="0.9" step="0.01" value="${item.paramRange}">
                                <span id="paramValue">${item.paramRange}</span>
                            `;
                    container.appendChild(sliderDiv);
                    document.getElementById("paramRange").addEventListener("input", function () {
                        document.getElementById('paramValue').textContent = this.value;
                        item.paramRange = this.value;
                    });
                } else if (mode === 'duration') {
                    // 输入框，单位：秒
                    container.innerHTML = `
                                <input type="number" id="durationInput" step="1" min="1" value="${item.durationInput}"> <span>秒</span>
                            `;
                    document.getElementById("durationInput").addEventListener("input", function () {
                        item.durationInput = this.value;
                    });
                } else if (mode === 'count') {
                    // 输入框，单位：个分镜
                    container.innerHTML = `
                                <input type="number" id="countInput" min="1" step="1" value="${item.countInput}"> <span>个分镜</span>
                            `;
                    document.getElementById("countInput").addEventListener("input", function () {
                        item.countInput = this.value;
                    });
                } else {
                    container.innerHTML = `<span style="color: #888;">该模式不需要参数设置</span>`;
                }
            };
            renderParamSetting('scene');

            // 获取滑块和显示值的元素
            let voiceSpeedSlider = document.getElementById('voice-speed-slider'),
                voiceSpeedValue = document.getElementById('voice-speed-slider-value'),
                voicePitchSlider = document.getElementById('voice-pitch-slider'),
                voicePitchValue = document.getElementById('voice-pitch-slider-value'),
                voiceVolumeSlider = document.getElementById('voice-volume-slider'),
                voiceVolumeValue = document.getElementById('voice-volume-slider-value');

            // 监听滑块值的变化
            voiceSpeedSlider.addEventListener('input', () => {
                voiceSpeedValue.textContent = voiceSpeedSlider.value;
            });

            voicePitchSlider.addEventListener('input', () => {
                voicePitchValue.textContent = voicePitchSlider.value;
            });

            voiceVolumeSlider.addEventListener('input', () => {
                voiceVolumeValue.textContent = voiceVolumeSlider.value;
            });

            // 监听单选框变化
            document.querySelectorAll('input[name="split_mode"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    renderParamSetting(this.value);
                });
            });

            document.getElementById("autoShotCount").addEventListener('input', function () {
                shot_list_item.auto.count = this.value;
            })
            document.getElementById("autoShotDuration").addEventListener('input', function () {
                shot_list_item.auto.duration = this.value;
            })

            // 绑定全选框
            document.getElementById('selectAll').addEventListener('change', function () {
                const isChecked = this.checked;
                document.querySelectorAll('.row-check').forEach(cb => cb.checked = isChecked);
            });

            // 绑定每个行复选框：当所有被选中时自动勾选表头全选
            document.querySelectorAll('.row-check').forEach(cb => {
                cb.addEventListener('change', function () {
                    const all = document.querySelectorAll('.row-check');
                    const checked = document.querySelectorAll('.row-check:checked');
                    document.getElementById('selectAll').checked = all.length === checked.length;
                });
            });


            window.refresh_subtitle_table = function () {
                let subtitle_items = document.querySelectorAll('.subtitle-input');
                if (subtitle_items) {
                    subtitle_items.forEach(sbd => {
                        sbd.addEventListener('input', function () {
                            const data_id = parseInt(this.parentNode.parentNode.parentNode.getAttribute('data-id'));
                            for (let data of subtitle_data) {
                                if (parseInt(data.id) === data_id) {
                                    data.text = this.value;
                                }
                            }

                        })
                    })
                }
            };


            window.refresh_table = function (type) {
                if (type === 'normal') {
                    // 渲染基础合成分镜列表待支
                    const tbody = document.getElementById('shotListBody-synthesis');
                    if (!tbody) {
                        return;
                    }
                    tbody.innerHTML = shot_list_item.normal.map(shot => `
                                    <tr data-id="${shot.id}">
                                        <td>${shot.id}</td>
                                        <td>
                                            <input type="text" class="normal-shot-name" value="${shot.name}">
                                        </td>
                                        <td>
                                            <label><input type="text" readonly onclick="shot_folder_input('normal', ${shot.id}, 'count', 'video')" class="normal-shot-folder-path-input" placeholder="请选择分镜文件夹" value="${shot.folder}"></label>
                                        </td>
                                        <td>${shot.count || ""}</td>
                                        <td>
                                            <select onchange="updateShotData('normal', ${shot.id}, 'rule', this.value)">
                                                <option value="随机" ${shot.rule === '随机' ? 'selected' : ''}>随机</option>
                                                <option value="去重" ${shot.rule === '去重' ? 'selected' : ''}>去重</option>
                                            </select>
                                        </td>
                                        <td>
                                            <a href="#" class="delete-btn" onclick="DeleteShot('normal', ${shot.id})">删除</a>
                                        </td>
                                    </tr>
                                `).join('');
                }
                else if (type === 'advanced') {
                    const tbody = document.getElementById('shotListBody-advanced');
                    if (!tbody) return;
                    tbody.innerHTML = shot_list_item.advanced.map(shot => `
                                <tr data-id="${shot.id}">
                                    <td>
                                        <input type="text" class="advanced-shot-name" value="${shot.name}">
                                    </td>
                                    <td>${shot.count}</td>
                                    <td>
                                        <div class="import-controls">
                                            <input type="text" class="advanced-shot-folder-path-input" style="display: none;" value="${shot.folder}">
                                            <button class="btn-primary btn-small" onclick="shot_folder_input('advanced', ${shot.id}, 'count', 'video')">导入文件夹</button>
                                            <button class="btn-primary btn-small" onclick="shot_file_input('advanced', ${shot.id}, 'mp4')">导入文件</button>
                                            <select class="short-select" onchange="updateShotData('advanced', ${shot.id}, 'rule', this.value)">
                                                <option value="随机" ${shot.rule === '随机' ? 'selected' : ''}>随机</option>
                                                <option value="去重" ${shot.rule === '去重' ? 'selected' : ''}>去重</option>
                                            </select>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="shot-settings">
                                            <div class="setting-group">
                                                <label>分镜时长(秒):</label>
                                                <input type="number" value="${shot.duration}" class="advanced-storyboard-duration-input">
                                            </div>
                                            <div class="setting-group">
                                                <label>分镜规则:</label>
                                                <select class="medium-select" onchange="updateShotData('advanced', ${shot.id}, 'clip_rule', this.value)">
                                                    <option value="截取" ${shot.rule === '截取' ? 'selected' : ''}>截取</option>
                                                </select>
                                            </div>
                                            <div class="setting-group">
                                                <label>开始时间(秒):</label>
                                                <input type="number" value="${shot.startTime}" class="advanced-start-time-input">
                                            </div>
                                            <div class="setting-group">
                                                <label>镜像:</label>
                                                <select class="short-select" onchange="updateShotData('advanced', ${shot.id}, 'mirror', this.value)">
                                                    <option value="">无</option>
                                                    <option value="水平" ${shot.mirror === '水平' ? 'selected' : ''}>水平</option>
                                                    <option value="垂直" ${shot.mirror === '垂直' ? 'selected' : ''}>垂直</option>
                                                </select>
                                            </div>
                                            <div class="setting-group">
                                                <label>滤镜:</label>
                                                <!-- TODO: 待实现 -->
                                                <a href="#" class="blue-link">${shot.filter}</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="#" class="delete-btn" onclick="DeleteShot('advanced', ${shot.id})">删除</a>
                                    </td>
                                </tr>
                            `).join('');
                }
                else if (type === 'pro') {
                    const tbody = document.getElementById('shotListBody-pro');
                    if (!tbody) return;
                    tbody.innerHTML = shot_list_item.pro.map(shot => `
                                <tr data-id="${shot.id}">
                                    <td>
                                        <input type="text" class="pro-name-input" value="${shot.name}">
                                    </td>
                                    <td>
                                        <div class="count-group">
                                            <div>视频数量: ${shot.count}</div>
                                            <div>配音数量: ${shot.audio_count}</div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="import-controls">
                                            <div class="import-group">
                                                <label>导入视频:</label>
                                                <input type="text" class="pro-shot-folder-path-input" style="display: none;" value="${shot.folder}">
                                                <button class="btn-primary btn-small" onclick="shot_folder_input('pro', ${shot.id}, 'count', 'video')">导入文件夹</button>
                                                <button class="btn-primary btn-small" onclick="shot_file_input('pro', ${shot.id}, 'mp4')">导入文件</button>
                                                <select class="short-select" onchange="updateShotData('pro', ${shot.id}, 'rule', this.value)">
                                                    <option value="随机" ${shot.rule === '随机' ? 'selected' : ''}>随机</option>
                                                    <option value="去重" ${shot.rule === '去重' ? 'selected' : ''}>去重</option>
                                                </select>
                                            </div>
                                            <div class="import-group">
                                                <label>导入配音:</label>
                                                <input type="text" class="pro-shot-audio-path-input" style="display: none;" value="${shot.audio}">
                                                <button class="btn-primary btn-small" onclick="shot_folder_input('pro', ${shot.id}, 'audio_count', 'audio')">导入文件夹</button>
                                                <button class="btn-primary btn-small" onclick="shot_file_input('pro', ${shot.id}, 'mp3')">导入文件</button>
                                                <select class="short-select" onchange="updateShotData('pro', ${shot.id}, 'audio_rule', this.value)">
                                                    <option value="随机" ${shot.rule === '随机' ? 'selected' : ''}>随机</option>
                                                    <option value="去重" ${shot.rule === '去重' ? 'selected' : ''}>去重</option>
                                                </select>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="short-select" onchange="updateShotData('pro', ${shot.id}, 'mirror', this.value)">
                                                <option value="">无</option>
                                                <option value="水平" ${shot.mirror === '水平' ? 'selected' : ''}>水平</option>
                                                <option value="垂直" ${shot.mirror === '垂直' ? 'selected' : ''}>垂直</option>
                                            </select>
                                    </td>
                                    <td>
                                        <a href="#" class="delete-btn" onclick="DeleteShot('pro', ${shot.id})">删除</a>
                                    </td>
                                </tr>
                            `).join('');
                }
                else if (type === 'auto') {
                    document.getElementById('auto-mix-folder-input').value = shot_list_item.auto.folder;
                    document.getElementById('autoShotCount').value = shot_list_item.auto.count;
                    document.getElementById('autoShotDuration').value = shot_list_item.auto.duration;
                    document.getElementById('translateDuration').value = shot_list_item.auto.transition_duration;
                }
                bindEventListeners()
            };

            // 视频合成分镜列表
            window.AddShot = function (type) {
                let shot_id = shot_list_item[type].length > 0 ? Math.max(...shot_list_item[type].map(s => s.id)) + 1 : 1,
                    shot_name = `分镜${shot_id}`,
                    shot_folder = "",
                    shot_count = "",
                    shot_rule = "随机",
                    shot = {};

                if (type === 'normal') {
                    shot = {
                        id: shot_id,
                        name: shot_name,
                        folder: shot_folder,
                        count: shot_count,
                        rule: shot_rule
                    };
                }
                else if (type === 'advanced') {
                    shot = {
                        id: shot_id,
                        name: shot_name,
                        folder: shot_folder,
                        count: shot_count,
                        rule: shot_rule,
                        duration: 0,
                        startTime: 0,
                        clip_rule: "截取",
                        mirror: '无',
                        filter: '无'
                    };

                }
                else if (type === 'pro') {
                    shot = {
                        id: shot_id,
                        name: shot_name,
                        folder: shot_folder,
                        count: 0,
                        rule: shot_rule,
                        audio: "",
                        audio_count: 0,
                        audio_rule: shot_rule,
                        mirror: '无',
                        filter: '无'
                    };

                }
                shot_list_item[type].push(shot);
                refresh_table(type);
            }
            // 删除分镜
            window.DeleteShot = function (type, shot_id) {
                shot_list_item[type] = shot_list_item[type].filter(shot => shot.id !== shot_id);
                refresh_table(type);
            }
            // 清空分镜
            window.ClearShot = function (type) {
                shot_list_item[type] = [];
                refresh_table(type);
            }
            // 顶部标签切换
            document.querySelectorAll('.tab-nav .tab-item').forEach(tab => {
                tab.addEventListener('click', () => {
                    document.querySelectorAll('.tab-nav .tab-item').forEach(t => {
                        t.classList.remove('active');
                    });
                    tab.classList.add('active');

                    const tabId = tab.getAttribute('data-tab');
                    document.querySelectorAll('.tab-content').forEach(content => {
                        content.classList.remove('active');
                    });
                    document.getElementById(tabId).classList.add('active');

                    if (tabId === 'voice') {
                        load_audio_metrail();
                    }

                    // 确保切换到视频合成标签时，显示默认的基础合成内容
                    if (tabId === 'synthesis') {
                        // 设置基础合成为默认选中的二级导航
                        const synthesisNav = document.querySelector('#synthesis .sub-nav');
                        synthesisNav.querySelectorAll('.sub-nav-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        synthesisNav.querySelector('.sub-nav-item:first-child').classList.add('active');

                        // 显示基础合成的内容
                        const synthesisContent = document.querySelector('#synthesis .synthesis-content');
                        synthesisContent.querySelectorAll('.content-section').forEach(section => {
                            section.classList.remove('active');
                        });
                        synthesisContent.querySelector('.synthesis-basic').classList.add('active');
                    }
                });
            });
            // 视频合成二级导航切换
            document.querySelectorAll('.sub-nav-item').forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有导航项的激活状态
                    const parentNav = item.closest('.sub-nav');
                    parentNav.querySelectorAll('.sub-nav-item').forEach(i => {
                        i.classList.remove('active');
                    });
                    item.classList.add('active');

                    // 获取对应的内容区域类名
                    let contentType;
                    if (item.closest('#material')) {
                        // 素材库的二级导航
                        contentType = item.textContent === '智能分镜' ? 'smart-shot' : 'online-material';
                    } else if (item.closest('#synthesis')) {
                        // 视频合成的二级导航
                        const text = item.textContent.toLowerCase().replace(/\s+/g, '-');
                        switch (text) {
                            case '基础合成':
                                contentType = 'synthesis-basic';
                                break;
                            case '高级合成':
                                contentType = 'synthesis-advanced';
                                break;
                            case '专业合成':
                                contentType = 'synthesis-pro';
                                break;
                            case '自动混剪':
                                contentType = 'synthesis-auto';
                                break;
                            case '分组合成':
                                contentType = 'synthesis-group';
                                break;
                            default:
                                contentType = 'synthesis-basic';
                        }
                    }

                    // 隐藏所有内容
                    const parentContent = item.closest('#synthesis') ?
                        document.querySelector('.synthesis-content') :
                        item.closest('.tab-content');
                    parentContent.querySelectorAll('.content-section').forEach(section => {
                        section.classList.remove('active');
                    });
                    // 显示对应内容
                    const targetSection = parentContent.querySelector(`.${contentType}`);
                    if (targetSection) {
                        targetSection.classList.add('active');
                    } else {
                    }
                });
            });
            // 文件夹树交互
            document.querySelectorAll('.folder-item').forEach(folder => {
                const header = folder.querySelector('.folder-header');
                if (!header) return;

                header.addEventListener('click', (e) => {
                    e.stopPropagation();

                    folder.classList.toggle('expanded');
                    const content = folder.querySelector('.folder-content');
                    if (content) {
                        content.classList.toggle('expanded');
                    }

                    const icon = header.querySelector('.folder-icon');
                    if (icon) {
                        icon.textContent = folder.classList.contains('expanded') ? '⯆' : '⯈';
                    }

                    document.querySelectorAll('.folder-item').forEach(f => {
                        if (f !== folder) f.classList.remove('active');
                    });
                    folder.classList.add('active');
                });
            });
            // 文件点击事件
            document.querySelectorAll('.file-item').forEach(file => {
                file.addEventListener('click', (e) => {
                    e.stopPropagation();

                    // 移除其他文件的选中状态
                    document.querySelectorAll('.file-item').forEach(f => {
                        f.classList.remove('active');
                    });

                    // 添加当前文件的选中状态
                    file.classList.add('active');

                    // 移除所有文件夹的选中状态
                    document.querySelectorAll('.folder-item').forEach(f => {
                        f.classList.remove('active');
                    });

                    const fileName = file.textContent.replace('📄 ', '');
                    updateVideoGrid(fileName);
                });
            });


            /* 分割符 */
            // 更新数据
            window.updateShotData = function (channel, id, field, value) {
                const shot = shot_list_item[channel].find(item => item.id === id);
                if (shot) {
                    shot[field] = value;
                }
            }

            window.showModal = function (message) {
                document.getElementById("message").innerText = message;
                document.getElementById("overlay").style.display = "block";
                document.getElementById("modal").style.display = "block";
            };

            window.closeModal = function () {
                document.getElementById("overlay").style.display = "none";
                document.getElementById("modal").style.display = "none";
            };

            // 监听表格的输入事件
            window.bindEventListeners = function () {

                window.getShotIdFromRow = function (element) {
                    return element.closest('tr').getAttribute('data-id');
                };

                let params_monitor_function = function (elm, channel, key) {
                    document.querySelectorAll(elm).forEach(input => {
                        input.addEventListener("input", function (event) {
                            const id = getShotIdFromRow(event.target);
                            const newName = event.target.value;
                            updateShotData(channel, id, key, newName);
                        });
                    });
                }

                // 基础合成
                params_monitor_function(".normal-shot-name", "normal", "name");
                params_monitor_function(".normal-shot-folder-path-input", "normal", 'folder')
                // 高级合成
                params_monitor_function(".advanced-shot-name", "advanced", "name")
                params_monitor_function(".advanced-shot-folder-path-input", "advanced", 'folder')
                params_monitor_function(".advanced-storyboard-duration-input", "advanced", "duration")
                params_monitor_function(".advanced-start-time-input", "advanced", "startTime")
                // 专业合成
                params_monitor_function(".pro-name-input", "pro", "name")
                params_monitor_function(".pro-shot-folder-path-input", "pro", "folder")
                params_monitor_function(".pro-shot-audio-path-input", "pro", "audio")
            };

        }


        // 初始渲染

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }


    </script>

</body>

</html>